<template>
  <div>
    <el-card class="total">
      <el-row type="flex">
        <el-col :span="6" class="title">项目统计</el-col>
      </el-row>
      <el-row type="flex" class="classify">
        <el-col :span="24" class="first">
          <ul>
            <li v-for="(item, index) in totalList" :key="index">
              <div>{{ item.title }}</div>
              <div>
                <span :class="sstt[index]">{{ item.num }}</span>项
              </div>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-row type="flex" class="main" :gutter="10">
        <el-col :span="8" class="now">
          <el-col class="chartTitle">当前项目概况</el-col>
          <el-col class="chart bar1">
            <NowBar></NowBar>
          </el-col>
        </el-col>
        <el-col :span="8" class="done">
          <el-col class="chartTitle">开发已完成率</el-col>
          <el-col class="chart bar2">
            <DoneBar></DoneBar>
          </el-col>
        </el-col>
        <el-col :span="8" class="bug">
          <el-col class="chartTitle">Bug率</el-col>
          <el-col class="chart bar3">
            <BugBar></BugBar>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import NowBar from "./nowBar";
import DoneBar from "./doneBar";
import BugBar from "./bugBar";

import { getCompaPrjMessage } from "../../../../service/workbenchApi";

export default {
  name: "total",
  props: [""],
  components: { NowBar, DoneBar, BugBar },
  data() {
    return {
      num: [],
      totalList: [
        // 管理员看到的项目统计列表
        { title: "已开发项目", num: "" },
        { title: "正式项目", num: "" },
        { title: "暂停项目", num: "" },
        { title: "关闭项目", num: "" },
      ],

      sstt: ["ss1", "ss2", "ss3", "ss4"], // 颜色分类
    };
  },
  methods: {
    getData() {
      getCompaPrjMessage().then((res) => {
        if (res.code == 0) {
          let obj = res.data;
          this.totalList.map((el, index) => {
            el.num = Object.values(obj)[index];
            return el;
          });
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1366px) {
  .total {
    height: 100% !important;
  }
  .total /deep/ .el-row--flex {
    flex-wrap: wrap !important;
  }
  .total /deep/ .el-col-8 {
    width: 50% !important;
  }
}
.total {
  width: 100%;
  // margin-top: 10px;
  .title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
  }
  .classify {
    width: 100%;
    height: 100%;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
  .main {
    width: 100%;
    height: 100%;
    margin-top: 45px;
    .chartTitle {
      text-align: center;
      margin-bottom: 10px;
    }
    .chart {
      width: 100%;
      height: 250px;
    }
  }
}
.ss1 {
  color: #00b98d;
  font-size: 36px;
  font-weight: bold;
}
.ss2 {
  color: #3f9dff;
  font-size: 36px;
  font-weight: bold;
}
.ss3 {
  color: #8f9399;
  font-size: 36px;
  font-weight: bold;
}
.ss4 {
  color: #f46b6b;
  font-size: 36px;
  font-weight: bold;
}
</style>